<template>
  <div id="app">
    <!--    顶部搜索-->
    <div class="topSearch">
      <span>
        订单名称: <el-input clearable size="small" style="width: 200px" placeholder="请输入订单名称"
                        v-model="params.storeName"></el-input>
      </span>
      <span>
        创建人名称: <el-input clearable size="small" style="width: 200px" placeholder="请输入创建人名称"
                         v-model="params.creatorName"></el-input>
      </span>
      <span>
        CAD操作人员: <el-input clearable size="small" style="width: 200px" placeholder="请输入CAD操作人员名称"
                           v-model="params.cadName"></el-input>
      </span>
      <span>
        仓库: <el-select clearable size="small" style="width: 200px" placeholder="请选择仓库名称"
                       v-model="params.areaId">
        <el-option v-for="(e,i) in areaData" :label="e.areaName" :key="i" :value="e.area"></el-option>
      </el-select>
      </span>
      <span>
        出库状态: <el-select clearable size="small" style="width: 200px" placeholder="请选择出库状态"
                         v-model="params.outStatus">
        <el-option v-for="(e,i) in outSpringStatus" :label="e.name" :key="i" :value="e.id"></el-option>
      </el-select>
      </span>
      <span>
        订单类型: <el-select clearable size="small" style="width: 200px" placeholder="请选择订单类型"
                         v-model="params.orderType">
        <el-option v-for="(e,i) in orderType" :label="e.name" :key="i" :value="e.id"></el-option>
      </el-select>
      </span>
      <span>
        是否欠款: <el-select clearable size="small" style="width: 200px" placeholder="请选择"
                         v-model="params.isDebt">
        <el-option v-for="(e,i) in isDebtData" :label="e.name" :key="i" :value="e.id"></el-option>
      </el-select>
      </span>
      <span>
        排序规则: <el-select clearable size="small" style="width: 200px" placeholder="请选择"
                         v-model="params.orderBy">
        <el-option v-for="(e,i) in ruleData" :label="e.name" :key="i" :value="e.id"></el-option>
      </el-select>
      </span>
      <span>开始时间： <el-date-picker clearable v-model="params.startTime" size="small" value-format="yyyy-MM-dd"
                                  placeholder="请选择开始时间"></el-date-picker> </span>
      <span>结束时间： <el-date-picker clearable v-model="params.endTime" size="small" value-format="yyyy-MM-dd"
                                  placeholder="请选择结束时间"></el-date-picker> </span>
      <span>品牌方：
        <el-select
            v-model="params.systemType"
            placeholder="请按品牌方搜索"
            size="small"
            clearable
            style="width: 200px"
        >
          <el-option
              :value="item.id"
              :label="item.systemName"
              :key="item.id"
              v-for="item in systemList"
          ></el-option>
        </el-select>
      </span>
      <span>
        <el-button size="small" type="primary" @click="_search">搜 索</el-button>
        <el-button size="small" @click="_reset">重 置</el-button>
      </span>
    </div>
    <!--中部表格-->
    <div class="centerTable">
      <el-table :data="orderData" border
                v-loading="loading"
                height="calc(100vh - 250px)"
                ref="table"
                @header-dragend="handleHeaderDragend"
                :cellStyle="{ textAlign: 'center', 'font-size': '14px' }"
                :headerCellStyle="{
          textAlign: 'center',
          fontWeight: 400,
          background: '#66b1ff',
          color: 'white',
          fontSize: '13px'
        }">
        <el-table-column prop="orderType" label="类型" width="80px">
          <template v-slot:default="scope">
            <span :style="{color: scope.row.orderType == 2 ? '#FF8C00' : '#1E90FF',}">{{
                scope.row.orderType == 2 ? '老店升级' : '新增店铺'
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="lockInventory" label="订单状态" width="75px">
          <template v-slot:default="scope">
            <span :style="{color: scope.row.lockInventory == 2 ? '#1E90FF' : '#FF8C00',}">{{
                scope.row.lockInventory == 2 ? '已确认' : '未确认'
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isDebt" label="是否欠款" width="75px">
          <template v-slot:default="scope">
            <span :style="{color: scope.row.isDebt == 1 ? '#1E90FF' : '#FF8C00',}"
                  @click="scope.row.isDebt == 1 ? null : dealDebt(scope.row)">{{
                scope.row.isDebt == 1 ? '已结清' : '欠款'
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isKaYou" label="卡游层板" width="75px">
          <template v-slot:default="scope">
            <span :style="{color: scope.row.isKaYou == 1 ? '#1E90FF' : '#FF8C00',}">{{
                scope.row.isKaYou == 1 ? '是' : '否'
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="id" label="ID" width="70px"></el-table-column>
        <el-table-column prop="storeName" label="订单名称" width="180px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="systemName" label="所属品牌" width="95px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="lockInventory" label="所属仓库" width="75px">
          <template v-slot:default="scope">
            <span>{{
                $store.state.areaMap[scope.row.area] || '--'
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" label="发起人" width="65px"></el-table-column>
        <el-table-column prop="createdAt" label="创建时间" width="110px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="deliveryDate" label="发货日期" width="95px"></el-table-column>
        <el-table-column prop="address" label="发货地址" width="180px"></el-table-column>
        <el-table-column prop="distance" label="距离/公里" width="90px"></el-table-column>
        <el-table-column prop="storeArea" label="面积/平方" width="90px"></el-table-column>
        <el-table-column prop="storeArea" label="总成本/元" width="130px">
          <template v-slot:default="scope">
            <div style="display: flex;flex-direction: column;align-items: flex-start;">
              <p style="font-size: 14px">安装(含距离):{{ scope.row.installationCost || 0 }}</p>
              <p style="font-size: 14px">拣货：{{ scope.row.jhCost || 0 }}</p>
              <p style="font-size: 14px">装车：{{ scope.row.zcCost || 0 }}</p>
              <p style="font-size: 14px">距离：{{ scope.row.distanceCost || 0 }}</p>
              <p style="font-size: 14px">卸车：{{ scope.row.xcCost || 0 }}</p>
              <p style="color: #66b1ff;font-size: 14px">总提成：{{ scope.row.totalCost || 0 }}</p></div>
          </template>
        </el-table-column>
        <el-table-column prop="storeArea" label="付款明细" width="150px" show-overflow-tooltip>
          <template v-slot:default="scope">
            <div style="display: flex;flex-direction: column;align-items: flex-start;">
              <p style="font-size: 13px">付款金额:{{ scope.row.payCount || '' }}</p>
              <p style="font-size: 13px">付款卡号：{{ scope.row.payCard || '' }}</p>
              <p style="font-size: 13px">付款时间：{{ scope.row.payTime || '' }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="customPhone" label="客户联系方式" width="120px" show-overflow-tooltip></el-table-column>
        <el-table-column prop="totalAmount" label="应收金额" width="80px" v-if="authority.includes(294)"></el-table-column>
        <el-table-column prop="payMoney" label="实付金额" width="80px" v-if="authority.includes(294)"></el-table-column>
        <el-table-column prop="totalPayment" label="已回款总额" width="100px"
                         v-if="authority.includes(293)"></el-table-column>
        <el-table-column prop="outStatus" label="出库状态" width="100px">
          <template v-slot:default="scope">
            <span
                :style="{color: scope.row.outStatus ? (scope.row.outStatus == 1 ? '#66b1ff' : '#FF8C00') : '#808080',}"> {{
                outMap[scope.row.outStatus]
              }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="storeImgs" label="营业区原始图" width="100px">
          <template v-slot:default="scope">
            <el-image v-if="scope.row.storeImgs" style="width: 50px" :src="imgSrc"
                      :preview-src-list="_imgRenders(scope.row.storeImgs).map((img)=>img)"></el-image>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="cadImg" label="营业区转化图" width="100px">
          <template v-slot:default="scope">
            <el-image v-if="scope.row.cadImg" style="width: 50px" :src="imgSrc"
                      :preview-src-list="_imgRenders(scope.row.cadImg).map((img)=>img)"></el-image>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="cadImg" label="仓库原始图" width="100px">
          <template v-slot:default="scope">
            <el-image v-if="scope.row.storageOriginImg" style="width: 50px" :src="imgSrc"
                      :preview-src-list="_imgRenders(scope.row.storageOriginImg).map((img)=>img)"></el-image>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="storageImg" label="仓库转化图" width="100px">
          <template v-slot:default="scope">
            <el-image v-if="scope.row.storageImg" style="width: 50px" :src="imgSrc"
                      :preview-src-list="_imgRenders(scope.row.storageImg).map((img)=>img)"></el-image>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="goodsOfferImg" label="营业区报价图" width="100px">
          <template v-slot:default="scope">
            <el-image v-if="scope.row.goodsOfferImg" style="width: 50px" :src="imgSrc"
                      :preview-src-list="_imgRenders(scope.row.goodsOfferImg).map((img)=>img)"></el-image>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="storageOfferImg" label="仓储区报价图" width="100px">
          <template v-slot:default="scope">
            <el-image v-if="scope.row.storageOfferImg" style="width: 50px" :src="imgSrc"
                      :preview-src-list="_imgRenders(scope.row.storageOfferImg).map((img)=>img)"></el-image>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180px" fixed="right">
          <template v-slot:default="scope">
            <div class="handleAction">
              <el-link style="color: #66b1ff" @click="_out(scope.row)"
                       v-if="scope.row.outStatus != 2&&authority.includes(301)">出库
              </el-link>
              <el-link style="color: #ff6a00" @click="_installer(scope.row)" v-if="authority.includes(302)">操作人员
              </el-link>
              <el-link style="color: #ff6a00" @click="installerList(scope.row)" v-if="authority.includes(303)">操作列表
              </el-link>
              <el-link style="color: #13ce66" @click="downNew(scope.row,1)" v-if="authority.includes(304)&&(authority.includes(1062)||scope.row.sendCadGoods==1)">货架清单下载
              </el-link>
              <el-link style="color: #13ce66" @click="downNew(scope.row,2)" v-if="authority.includes(305)">杂项和仓储架下载清单
              </el-link>
              <el-link style="color: #64748B" @click="_analysis(scope.row,'goods')" v-if="authority.includes(306)">
                货架解析详情
              </el-link>
              <el-link style="color: #64748B" @click="_analysis(scope.row,'storage')" v-if="authority.includes(307)">
                仓储解析详情
              </el-link>
              <el-link style="color: #64748B" @click="_analysis(scope.row,'storageOffer')"
                       v-if="authority.includes(308)"> 仓储区报价解析
              </el-link>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          style="padding: 20px 0"
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[20, 30, 40, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalCount"
      >
      </el-pagination>
    </div>
    <goodsAnalysis ref="analysisRef"></goodsAnalysis>
    <warehouseOut ref="outRef" @addStatus="receiveData"></warehouseOut>
    <installOption ref="installRef" @addStatus="receiveData"></installOption>
    <exportOrderExcel ref="orderExcel"></exportOrderExcel>
  </div>
</template>

<script>
import _imgRenders from "../../assets/js/dealPic";
import goodsAnalysis from "./orderListDialog/goodsAnalysis.vue";
import warehouseOut from "./orderListDialog/warehouseOut.vue";
import installOption from "./orderListDialog/installOption.vue";
import exportOrderExcel from "./orderListDialog/exportOrderExcel.vue";
import axios from "axios";

export default {
  name: "OrderWarehouseTest",
  components: {
    goodsAnalysis,
    warehouseOut,
    installOption,
    exportOrderExcel
  },
  data() {
    return {
      loading: false,
      systemList: [],
      params: {
        pageNumber: 1,
        pageSize: 20,
        orderBy: 1,
        orderType: 1,
        outStatus: "",
        areaId: "",
        cadName: "",
        creatorName: "",
        endTime: "",
        isDebt: "",
        startTime: "",
        storeName: "",
        systemType: "",
      },
      imgSrc: "https://qiniushelves.jiachuangnet.com/shelf/img/%E6%9F%A5%E7%9C%8B%E8%AF%A6%E6%83%85.png",
      orderData: [],
      currentPage: 1,
      totalCount: 0,
      areaData: [],
      outSpringStatus: [
        {
          name: "全部",
          id: -1
        }, {
          name: '待出库',
          id: 0
        }, {
          name: "部分出库",
          id: 1
        }, {
          name: "全部出库",
          id: 2
        },

      ],
      outMap: {
        0: '待出库',
        1: '部分出库',
        2: '全部出库',
      },
      authority: [],
      orderType: [
        {
          name: "新增店铺",
          id: 1
        }, {
          name: '老店翻新',
          id: 2
        }

      ],
      isDebtData: [
        {
          name: "欠款",
          id: 0
        }, {
          name: '已结清',
          id: 1
        }

      ],
      ruleData: [
        {
          name: "默认排序",
          id: 1
        }, {
          name: '发货时间',
          id: 2
        }, {
          name: '修改时间',
          id: 3
        }

      ],
    }
  },
  created() {
    const {authorityList = []} = this.$quinn.getStorage("userData") || {};
    this.authority = authorityList
    this.$api.areaLedgerAreaList().then(res => {
      this.areaData = res
    })
    this.getOrderList()
    this.getSystemType()

  },
  methods: {
    downNew(row, num) {
      this.$message.success('正在下载中...')
      axios({
        url: `${this.$apiHost}/order/getStorageDetailedDown`,
        method: 'get',
        responseType: 'blob',
        headers: {
          token: window.$quinn.getStorage("token")
        },
        params: {
          orderId: row.id,    // 单号
          type: num
        }
      }).then(res => {
        const disposition = res.headers['content-disposition'];
        let fileName = row.storeName + '.xlsx'; // 默认给个 .xlsx
        if (disposition) {
          const match = disposition.match(/filename="?([^"]+)"?/);
          if (match) {
            fileName = decodeURIComponent(match[1]);
            // 如果没有后缀，就补 .xlsx
            if (!fileName.includes('.')) {
              fileName += '.xlsx';
            }
          }
        }
        const blob = new Blob([res.data], {
          type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
        });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = fileName;
        link.click();
        URL.revokeObjectURL(link.href);
      });
    },
    getSystemType() {
      this.$api.orderGetSystemTypeVo().then((res) => {
        this.systemList = res
      })
    },
    _imgRenders,
    //解决鼠标拖动改变单元格宽度后 fixed right 高度下陷问题
    handleHeaderDragend() {
      // 拖动结束后重新布局
      this.$nextTick(() => {
        this.$refs.table.doLayout()
      })
    },
    getOrderList() {
      this.loading = true
      const data = {
        ...this.params,
      }
      this.$api.orderOrderList(data).then(res => {
        this.orderData = res.data
        this.totalCount = res.total
        this.loading = false
      })
    },
    handleSizeChange(val) {
      this.params.pageSize = val
      this.getOrderList()
    },
    handleCurrentChange(val) {
      this.params.pageNumber = val
      this.getOrderList()
    },
    _search() {
      this.params.pageNumber = 1
      this.getOrderList()
    },
    _reset() {
      this.params = this.$options.data.call(this).params
      this.getOrderList()
    },
    _analysis(row, type) {
      this.$refs.analysisRef.handleOpen(row, type)
    },
    _out(row) {
      this.$refs.outRef.handleOpen(row)
    },
    receiveData() {
      this.getOrderList()
    },
    installerList(row) {
      this.$refs.installRef.getDetail(row)
    },
    _installer(row) {
      this.$refs.installRef.handleOpen(row)
    },
    downShelves(row) {
      this.$refs.orderExcel.shelves(row)
    },
    downWarehouse(row) {
      this.$refs.orderExcel.warehouseDown(row)
    }
  }
}
</script>
<style scoped lang="less">
.topSearch {
  display: flex;
  flex-wrap: wrap;

  span {
    display: inline-block;
    margin-right: 15px;
    margin-bottom: 10px;
  }
}

.handleAction {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .el-link {
    margin-right: 8px;
    font-weight: normal;
    font-size: 14px;
  }
}

</style>